<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue的入门学习</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div id="app">
        <a v-bind:href="url">学成在线</a>
        {{name}} <!-- 相当于MVVM的View视图-->
        <input type="text" v-model="num1" /> +
        <input type="text" v-model="num2" /> =
        <!-- <span v-text="Number.parseInt(num1)+Number.parseInt(num2)"></span>-->
        <span v-text="result"></span>
        <button v-on:click="change">计算</button>
        <div :style="{ fontSize: size + 'px'}">中国加油！</div>
        <ul>
            <li v-for="(item, index) in list" :key="index" v-if="index % 2 == 0">{{index}}---{{item}}</li>
            <li v-for="(value, key) in user" :key="key">{{key}}---{{value}}</li>
            <li v-for="(item, index) in userList" :key="index">
                <div v-if="item.user.username == 'Gene_orange'" style="background: orange">
                    {{index}}--{{item.user.username}}--{{item.user.age}}
                </div>
                <div v-else="" style="background: indianred">
                    {{index}}--{{item.user.username}}--{{item.user.age}}
                </div>
            </li>
        </ul>
    </div>
</body>
<script>
    // 编写MVVM中的model部分及VM(ViewModel)部分
    let VM = new Vue({
        el: '#app',  // VM接管了id="app"区域的管理
        data:{
            name: 'Gene_orange',
            num1: null,
            num2: null,
            result: null,
            url: 'http://www.xuecheng.com',
            size: 10,
            list: [1, 2, 3, 4, 5],
            user: {username: 'OrangeMan', age: 10},
            userList: [
                {user: {username: 'OrangeMan', age: 10}},
                {user: {username: 'Gene_orange', age: 20}}
            ]
        },
        methods:{
            change:function () {
                this.result = Number.parseInt(this.num1) + Number.parseInt(this.num2);
            }
        }
    });
</script>
</html>